<template>

	<div class="user-info">
		<el-row :gutter="20" style="margin-left: 0;margin-right: 0;">
			<el-col :span="6">
				

				<el-card class="user-info__content" :body-style="{ padding: '0px' }">
					<div class="avatar-wrap" @click="uploadAvatar">
      					<!-- <img class="avatar" src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"> -->
      					<img class="avatar" :src="baseUrl+'/rest/common/preview/' + form.avatar">


      					<el-upload
      						with-credentials
						  	:action="uploadUrl"
						  	style="display: none"
						  	accept="image/*"
						  	:headers="uploadHeaders"
						  	:on-success="handleAvatarSuccess"
						>
						  	<el-button size="small" id="uploadAvatar" ref="uploadAvatar">点击上传</el-button> 
						</el-upload>
      				</div>
      				<div>
        				<p class="user-info__name">{{form.username}}</p>
        				<p style="text-align: center;margin-top: 5px;">
        					<router-link class="user-info__setting" :to="{path:'/info/setting'}">个人设置</router-link>
        				</p>
        				<p class="user-info__desc">
			              	<span v-for="(item,index) in userInfo.roleNames"
			                    :key="index">
			                	{{item}}
			              	</span>
            			</p>
            			<div class="user-info__detail-desc">
              				<p><i class="el-icon-message"></i><span>{{form.email}}</span></p>
              				<p><i class="el-icon-postcard"></i><span>{{form.deptName}}</span></p>
            			</div>

            			<div class="user-info__divider"></div>

            			<!-- <h4>标签</h4>
            			<div class="user-info__tags">
             	 			<el-tag class="user-info__tag" size="mini" effect="plain" v-for="(tag,index) in tags" :key="index">{{tag}}</el-tag>
            			</div> -->
      				</div>
    			</el-card>

			</el-col>

			<el-col style="background-color: #ffffff;" :span="18">
				<el-tabs v-model="tabActive">
					<el-tab-pane label="用户信息" name="info">

						<el-form size="mini" ref="infoForm" label-width="80px">

							<!-- <el-form-item class="info-form-item" label="头像">
								<div class="avatar-wrap">
									<img :src="">
								</div>
								<div class="tip">只能上传jpg/png用户头像，且不超过500kb</div>


								
							</el-form-item> -->

							<el-form-item class="info-form-item" label="姓名">
								<el-input v-model="form.name" :disabled="true"></el-input>
							</el-form-item>

							<el-form-item class="info-form-item" label="用户名">
								<el-input v-model="form.userName" ></el-input>
							</el-form-item>
							
							<el-form-item class="info-form-item" label="邮箱">
								<el-input v-model="form.email"></el-input>
							</el-form-item>

							<!-- <el-form-item class="info-form-item" label="部门">
								<el-input v-model="form.deptName"></el-input>
							</el-form-item> -->

							<el-form-item class="info-form-item" label="手机号码">
								<el-input v-model="form.phone" :disabled="true"></el-input>
							</el-form-item>

							<el-form-item class="info-form-item" label="企业名称">
								<el-input v-model="form.enterprise" ></el-input>
							</el-form-item>

							<el-form-item class="info-form-item" label="统一信用代码/注册号">
								<el-input v-model="form.creditCode" ></el-input>
							</el-form-item>

							
   
							<!-- <el-form-item class="info-form-item" label="地址">
								<el-input v-model="form.dz"></el-input>
							</el-form-item> -->

							<!-- <el-form-item class="info-form-item" label="标签">
								
								<el-select v-model="form.bq" placeholder="请选择标签">
    								<el-option
								      	v-for="(item,key) in tags"
								      	:key="key"
								      	:label="item"
								      	:value="item">
    								</el-option>
  								</el-select>

							</el-form-item> -->


							<el-form-item class="info-form-item">
								<el-button size="mini" type="primary" @click="submit">提交</el-button>
  								<el-button size="mini" @click="emptyAll">清空</el-button>
							</el-form-item>
						</el-form>

					</el-tab-pane>

					<el-tab-pane label="修改密码" name="password">

						<el-form :model="alterPassForm" size="mini" :rules="passRules" ref="alterPass" label-width="80px">

							
							<el-form-item class="info-form-item" prop="originalPass" label="原密码">
								<el-input type="password" v-model="alterPassForm.originalPass"></el-input>
							</el-form-item>

							<el-form-item class="info-form-item" prop="newPass" label="新密码">
								<el-input type="password" v-model="alterPassForm.newPass"></el-input>
							</el-form-item>

							<el-form-item class="info-form-item" prop="confirmPass" label="确认密码">
								<el-input type="password" v-model="alterPassForm.confirmPass"></el-input>
							</el-form-item>

							
							<el-form-item class="info-form-item">
								<el-button size="mini" type="primary" @click="alterPassSubmit">提交</el-button>
  								<el-button size="mini" @click="emptyPassword">清空</el-button>
							</el-form-item>
						</el-form>
					</el-tab-pane>
				</el-tabs>
			</el-col>
		</el-row>
	</div>

</template>

<script>
import { getToken } from '@/utils/auth'
import { mapGetters } from "vuex";
import { alterAvatar, alterPass, getInfo, editInfo, previewAvatar } from "@/api/user"
import option from "@/const/user/info";
import { baseUrl } from '@/config/env';

//上传头像
const uploadUrl = baseUrl+'/rest/common/upload';
//const uploadAvatarUrl = baseUrl+'/rest/system/updateAvatar';

export default{
	data(){
		//验证旧密码
		var validateOldPass = (rule,value,callback)=>{
			if(!value){
				callback(new Error('请输入密码'))
			}else if(value.toString().length < 6 || value.toString().length > 18){
				callback(new Error('密码长度为6 - 18个字符'))
			}else{
				callback()
			}
		}
		//验证新密码
		var validateNewPass = (rule,value,callback)=>{
			if(!value){
				callback(new Error('请输入密码'))
			}else if(value.toString().length < 6 || value.toString().length > 18){
				callback(new Error('密码长度为6 - 18个字符'))
			}else{
				callback()
			}
		}

		//确认密码
		var validateConfirmPass = (rule,value,callback)=>{
			if(!value){
				callback(new Error('请再次密码'))
			}else if(value !== this.alterPassForm.newPass){
				callback(new Error('两次输入密码不一致!'))
			}else{
				callback()
			}
		}

		return{
			uploadHeaders:{'Authorization':'Bearer ' + getToken()},
			baseUrl:baseUrl,
			uploadUrl:uploadUrl,
			form:{
				avatar:'',
				name:'',
				email:'',
				deptName:'',
				dz:'',
				bq:'',

			},
			alterPassForm:{
				originalPass:'',
				newPass:'',
				confirmPass:''
			},

			option:option,
			tags: [
		        'Guns',
		        'Roses',
		    ],
		    tabActive:'info',
		    passRules:{
		    	originalPass:[{required:true,validator:validateOldPass,trigger:'blur'}],
		    	newPass:[{required:true,validator:validateNewPass,trigger:'blur'}],
		    	confirmPass:[{required:true,validator:validateConfirmPass,trigger:'blur'}],
		    }
		}
	},
	created(){
		// this.form = this.userInfo;

		getInfo().then(res => {
			this.form = res.data.data;
		})
	},
	computed: {
		...mapGetters([
				"userInfo",
			])
	},
	methods:{
		//用户信息清空可选字段
		emptyAll(){
		   this.form.enterprise = "";
		   this.form.userName = "";
		   this.form.email = "";
		   this.form.creditCode = "";
		},
		//清空密码
		emptyPassword(){
			this.alterPassForm.originalPass = "";
			this.alterPassForm.newPass = "";
			this.alterPassForm.confirmPass = "";
		},
		//点击上传头像按钮
		uploadAvatar(){
			var uploadBtn = window.document.getElementById("uploadAvatar");
          	uploadBtn.click();
		},
		//上传图片成功
		handleAvatarSuccess(res,file){
			console.log("---上传头像成功----")
			console.log(res);
			var fileId = res.data.fileId;
			alterAvatar(fileId).then((res)=>{
				console.log("------修改头像成功-------")
				console.log(res);
				if(res.data.code == 200){
					//请求新用户信息
					// this.$store.dispatch('user/GetUserInfo');
					this.form.avatar = fileId;
				}
			})
		},
		//头像
		avatar () {
			previewAvatar(this.form.avatar).then(res => {

			})
		},
		//修改密码
		alterPassSubmit(){

			this.$refs.alterPass.validate((valid) => {
				if(valid){
					alterPass(this.alterPassForm.originalPass,this.alterPassForm.newPass).then((res)=>{
						console.log("--------修改密码返回信息----------")
						this.$message('密码修改成功');
					})
				}else{
					return false;
				}
			})

			
		},
		//修改用户信息
		submit () {
			editInfo(this.form).then(res => {
				this.$message({
					type: 'success',
					message: '修改成功'
				})
			}).catch(err => {
				this.$message({
					type: 'error',
					message: '修改失败'
				})
			})
		}
	}
}

</script>

<style scoped>
.user-info{
	background: #f8f8f8;
	min-width: 100%;
}

.user-info__content{
	padding: 10px;
	text-align: center;
}

.user-info__content .avatar{
	width: 100%;
}

.user-info__content .user-info__name{
	text-align: center;
	margin-bottom: 5px;
	font-size: 20px;
	font-weight: 700;
	color: #333;
}

.user-info__content .user-info__setting{
	text-align: center;
	font-size: 12px;
	color: #ff8100;
}

.user-info__content .user-info__desc{
	text-align: center;
}

.user-info__detail-desc p{
	text-align: left;
	font-size: 14px;
}
.user-info__detail-desc p>i{
	margin-right: 5px;
}
.user-info__divider {
    border-top: 1px dashed #e8e8e8;
    display: block;
    height: 0;
    width: 100%;
    margin: 24px 0;
    clear: both;
}

.user-info__tag{
	margin: 0 5px 5px 0;
}


.avatar-wrap{
	width: 120px;
	height: 120px;
	margin: auto;
	border-radius: 60px;
	background-color: #eaeaea;
}
.avatar-wrap>img{
	width: 120px;
	height: 120px;
	border-radius: 60px;
}

.tip{
	margin: 20px 0;
	color: #666;
}

.info-form-item{
	margin: 25px 0;
}
</style>